$(function () {
  class Page {

    constructor() {
      this.container = $('.goods_list .list')
      this._pagination = $('.pagination')
      this.data={}
      this.filter_btn = $(".fPrice .filter_btn")
      this.price_arr = $('.price_input')
      this.datas = null;
      //每一页展示的数据
      this.sum = null
      //每一页的起始下标
      this.start = 0;
      this.getDatas()
      this.bindEvent();
    }
    getDatas() {
      let options = {
        url: '../../static/data/list/goods_list.json'
      }
      axios(options).then(res => {
        this.datas = res.data
        this.pagination(this.datas)
        // new Pagination({
        //   content:'.goods_list .list',
        //   pagination:'.pagination',
        //   data:this.datas,
          
        // })
      })
    }

    //data_num是要分成几页
    pagination(data, data_num = 5) {
      this.sum = Math.ceil(data.length / data_num);
      this.data_num = data_num
      this.renderDatas(data);
      this.renderBullets();
    }

    renderDatas(data) {
      this.container.html('')
      for (let i = this.start; i < this.sum + this.start; i++) {
        this.container.append(`
        <li class='product'>
        <div class='product-iWrap'>
          <div class='productImg-wrap'>
            <img class='lozad' data-src='${data[i].src}'>
          </div>
          <div class='productPrice'>
            <em>${data[i].price}</em>
            <img data-src='https://tmallfans.cn-hangzhou.oss-pub.aliyun-inc.com/pifu/files/110363/20180912021209.png'>
          </div>
          <div class='productTitle'>${data[i].title}</div>
          <p class='productShop'>${data[i].store_name}</p>
  
          <div class='productStatus'>
            <span class='span1'>
              月成交
              <em>${data[i].pay_sum}</em>
            </span>
            <span class='span2'>
              评论
              <em>${data[i].discuss}</em>
            </span>
            <span class='ali_icon'></span>
          </div>
        </div>
      </li>
        `)
      }
      const observer = lozad();
      observer.observe();
    }
    renderBullets() {
      for (let i = 0; i < this.data_num; i++) {
        this._pagination.append(`
          <div class='bullets'>${i + 1}</div>
        `)
      }

    }


    bindEvent() {
      this._pagination.on('click', '.bullets', (e) => {
        this.start = (Number(e.target.innerHTML) - 1) * this.sum
        for(let i=this.start;i<(this.start+this.sum);i++){
          if(this.datas[i] !== undefined){
            this.renderDatas(this.datas);
          }
        }
        
      })
      $('.fSort .icon_one').on('click', () => {
        this.datas.sort((a, b) => {
          return Number(a.price.slice(1)) - Number(b.price.slice(1))
        })
        this.renderDatas(this.datas);
      })
      $('.fSort .icon_two').on('click', () => {
        this.datas.sort((a, b) => {
          return Number(b.price.slice(1)) - Number(a.price.slice(1))
        })
        this.renderDatas(this.datas);
      })
      this.container.on('click', '.product', (e) => {
        let ms = $(e.target).parents('.goods_list .list .product')
        this.data.src = $(ms).find('.lozad').attr('src')
        this.data.title = $(ms).find('.productTitle').html()
        this.data.price = $(ms).find('.productPrice em').html()
        // console.log(this.data);
        location.href = '../../dist/goods-details.html#id=' + encodeURI(JSON.stringify(this.data))
      })
      this.filter_btn.on('click',()=>{
        let start_price = Number(this.price_arr.first().val());
        let end_price = Number(this.price_arr.last().val())
        if(start_price >end_price){
          alert('您输入的数据有误，请重新输入')
          location.reload();
        }else if(start_price<0 || end_price<0){
          alert('您输入的数据有误，请重新输入')
          location.reload();
        }else{
          this.filter(start_price,end_price)
        }
      })
    }

    filter(x,y){
      let arrs = []
      for(let attr in this.datas){
        if(Number(this.datas[attr].price.split('.')[0].slice(1)) >= x && Number(this.datas[attr].price.split('.')[0].slice(1)) <= y) {
          arrs.push(this.datas[attr])
        }
      }
      this.datas = arrs
      this._pagination.html('')
      this.pagination(this.datas)
    }
  }

  new Page();

  class Index {
    constructor() {
      this.defaultmsg = $('.nav-head .defaultmsg')
      this.showmsg = $('.showmsg')
      this.nickname = $('.showmsg .nickname')
      this.quitbtn = $('.showmsg .quit')
      this.id = cookie('ID');
      this.token = cookie('Token');
      if (this.id.length > 0 && this.token.length > 0) {
        this.defaultmsg.css({
          display: 'none'
        })
        this.showmsg.css({
          display: 'block'
        })
        this.getUserInfo()
      }

      this.bindEvent()
    }

    getUserInfo() {
      let options = {
        url: 'http://localhost:8888/users/info/' + this.id,
        headers: {
          "authorization": this.token
        }

      }

      $.ajax(options).then(res => {
        this.render(res)
      })
    }

    render(res) {
      console.log(res);
      this.nickname.text(res.info.nickname);
    }
    quitUser() {
      let options = {
        url: 'http://localhost:8888/users/logout/' + this.id,
      }

      $.ajax(options).then(res => {
        console.log('退出账户成功');
        cookie('ID', null)
        cookie('Token', null)
        setTimeout(() => {
          location.reload()
        }, 500)
      })
    }
    bindEvent() {
      this.quitbtn.on('click', () => {
        this.quitUser()
      })
    }
  }
  new Index();


})
$(function(){
  

})